<template>
  <div class="product-detail">
    <e-head></e-head>
    <div class="main-content">
      <router-info :current="routerInfo"></router-info>
      <div class="flex-container">
        <div class="flex-container-left">
          <div class="flex-left-title">
            {{ $t("lang.product") + ">" + $t("lang.detail") }}
          </div>
          <div class="flex-left-item-list">
            <div
              :class="[
                'flex-left-item',
                index == currentAttr ? 'flex-left-item_checked' : '',
              ]"
              v-for="(item, index) in attributes"
              :key="index"
              @click="typeChange(item.id)"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
        <div class="flex-container-right">
          <div class="main-info">
            <div class="left-info">
              <div class="piczoom">
                <pic-zoom :url="currentImg" :scale="3"></pic-zoom>
              </div>
              <div class="p-carousel">
                <Carousel dots="none" arrow="always">
                  <CarouselItem
                    v-for="(item, index) in product.imgs.length % 5 > 0
                      ? parseInt(product.imgs.length / 5) + 1
                      : parseInt(product.imgs.length / 5)"
                    :key="index"
                  >
                    <div class="img-box">
                      <img
                        :src="item2"
                        v-for="(item2, index2) in product.imgs.slice(
                          index * 5,
                          index * 5 + 5
                        )"
                        :key="index2"
                        @click="imgShow(item2)"
                      />
                    </div>
                  </CarouselItem>
                </Carousel>
              </div>
            </div>
            <div class="right-info">
              <div class="name">
                <h1>
                  {{ product.name }}
                </h1>
              </div>
              <div class="desc">
                <p>
                  {{ product.remark }}
                </p>
              </div>
            </div>
          </div>
          <div class="detail-info">
            <div class="content-title">
              <span>Product Details</span>
            </div>
            <div class="ql-snow ql-editor" v-html="product.detail"></div>
          </div>
          <div class="related-info">
            <div class="content-title">
              <span>Related Products</span>
            </div>
            <div class="product-list">
              <div
                class="product-item"
                v-for="item in relatedProduct"
                :key="item.id"
                @click="detail(item)"
              >
                <img :src="item.imgs[0]" alt="" />
                <span>{{ item.name }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <e-foot></e-foot>
  </div>
</template>
<script>
import Ehead from "@/components/head.vue";
import Efoot from "@/components/foot.vue";
import RouterInfo from "@/components/router-info.vue";
import PicZoom from "@/components/picZoom.vue";
import { getProducts } from "@/utils/api.js";
export default {
  components: {
    "e-head": Ehead,
    "e-foot": Efoot,
    RouterInfo,
    PicZoom,
  },
  data() {
    return {
      currentAttr: null,
      attributes: [],
      product: "",
      currentImg: null,
      lastAttr: null,
      routerInfo: [
        {
          name: "lang.home",
          route: "",
        },
        {
          name: "lang.product",
          route: "",
        },
        {
          name: "lang.detail",
          route: "",
        },
      ],
      relatedProduct: [],
    };
  },
  created() {
    const a = JSON.parse(localStorage.getItem("product_attribute"));
    const p = JSON.parse(localStorage.getItem("product"));
    this.currentAttr = a.current;
    this.attributes = a.data;
    this.product = p;
    this.currentImg = this.product.imgs[0];
    this.fetchProducts();
  },
  methods: {
    imgShow(e) {
      this.currentImg = e;
    },
    typeChange(id) {
      this.$router.push({ path: "/product/" + id });
    },
    fetchProducts() {
      getProducts({
        typeId: this.product.type_id,
        pageSize: 6,
        current: 1,
      }).then((res) => {
        let data = res.data.data || [];
        data.forEach((item, index) => {
          item.imgs = item.imgs.split(",");
          data[index] = item;
        });
        data = data.filter((item) => {
          return item.id != this.product.id;
        });
        this.relatedProduct = data;
      });
    },
    detail(e) {
      localStorage.setItem("product", JSON.stringify(e));
      this.$router.push("/product/detail/" + e.id);
      window.location.reload();
    },
  },
};
</script>
<style lang="scss" scoped>
.product-detail {
  .main-info {
    display: flex;
    padding-bottom: 30px;
    border-bottom: 1px dashed #ccc;
    .left-info {
      .piczoom {
        width: 380px;
        height: 380px;
        border: 1px solid #ccc;
      }
      .p-carousel {
        width: 418px;
        height: 54px;
        position: relative;
        left: -20px;
        .img-box {
          display: flex;
          justify-content: space-around;
          padding: 0 50px;
          width: 416px;
          height: 54px;
          img {
            display: inline-block;
            width: 50px;
            height: 50px;
            &:hover {
              cursor: pointer;
              border: 1px solid red;
            }
          }
        }
      }
    }
    .right-info {
      .name {
        padding-bottom: 10px;
        border-bottom: 1px dashed #ddd;
      }
      .desc {
        padding-top: 10px;
      }
    }
  }
  .content-title {
    display: inline-block;
    padding: 20px;
    text-align: center;
    padding: 10px 20px;
    font-size: 14px;
    color: #fff;
    background: #0b8dd7;
  }
  .detail-info {
    padding-top: 36px;
  }

  .related-info {
    padding-top: 36px;
  }

  .product-list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 36px;
    .product-item {
      width: 260px;
      height: 420px;
      img {
        width: 260px;
        height: 330px;
        display: block;
      }
      span {
        display: block;
        text-align: center;
      }
    }
  }
}
</style>